<h2 class="title"><em></em></h2>
<h2 class="title"><em></em></h2>
<h2 class="title"><em></em></h2>
<h2 class="title"><em></em></h2>

如果我們 HTML 的架構如上，此時若使用

document.querySelector('.title').textContent = '123';

會發現只有第一個 .title 被改寫，其他的 .title 並沒有
.qeurySelector() 只會針對元素的第一筆資料，其他並不會被選入
這時候可以使用 .querySelectorAll()，這個不但可以把同樣的元素選起來外，還會以陣列的方式被傳回
如果以上面的 HTML 架構

document.querySelectorAll('.title');

這時候會把所有 .title 類別選取起來，並存放於一個陣列，用讀取陣列的方式我們可以針對每一個項目去做文字的更改:

var el = document.querySelectorAll('.title');
el[0].textContent = '123';
el[1].textContent = '456';
el[2].textContent = '789';
el[3].textContent = '123456789';

或對全部同類別的元素一次做修改，記得使用 for 迴圈，因為是陣列的方式選取:

var el = document.querySelectorAll('.title');
for(var i=0; i<el.length; i++){
    el[i].textContent = '更改';
}

這時候所有 .title 類別的文字都會一起改變
大家可以試試看 .querySelector() 跟 .querySelectorAll() 的差別